<template>
  <div class="police">
    <div class="police_cont_top">
      <h2>泵房选择 ：</h2>
      <el-cascader :options="options" v-model="houseId" @change="getHouseId">
        <template slot-scope="{ node, data }">
          <span>{{ data.value }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
      <div class="police_btn">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="近七天" name="Week"></el-tab-pane>
          <el-tab-pane label="本月" name="Month"></el-tab-pane>
          <el-tab-pane label="本年" name="Year"></el-tab-pane>
          <el-tab-pane label="自定义" name="fix"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="left_select">
      <h2>时间 ：</h2>
      <el-date-picker v-model="dateValue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']" @change="changeDate" :disabled="custom">
      </el-date-picker>
    </div>
    <div class="police_cont">
      <div class="police_checked">
        <div class="checked_left">
          <h2>报警级别： </h2>
          <!-- <el-checkbox-group v-model="checkList" @change="checkCalc1">
            <el-checkbox label="普通"></el-checkbox>
            <el-checkbox label="紧急"></el-checkbox>
          </el-checkbox-group> -->
          <el-radio-group v-model="checkList1" @change="checkCalc1">
            <el-radio label="普通"></el-radio>
            <el-radio label="紧急"></el-radio>
            <!-- <el-radio :label="9">备选项</el-radio> -->
          </el-radio-group>
        </div>
        <div class="checked_right">
          <h2>处理状态： </h2>
          <!-- <el-checkbox-group v-model="checkList2" @change="checkCalc2">
            <el-checkbox label="未处理"></el-checkbox>
            <el-checkbox label="已处理"></el-checkbox>
          </el-checkbox-group> -->
          <el-radio-group v-model="checkList2" @change="checkCalc2">
            <el-radio label="未处理"></el-radio>
            <el-radio label="已处理"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="police_table">
        <el-table :data="AfterChangeData" stripe style="width: 100%" :header-cell-style="{ color: '#17E8FF' }">
          <!-- <el-table-column type="cont1" label="日期">
            </el-table-column> -->
          <el-table-column type="index" label="序号">
          </el-table-column>
          <el-table-column prop="alarm_start_date" label="日期">
          </el-table-column>
          <el-table-column prop="siteName" label="水泵编号">
          </el-table-column>
          <el-table-column prop="alarm_level" label="报警级别">
            <template slot-scope="scope">
              {{scope.row.alarm_level ? '紧急': '普通'}}
            </template>
          </el-table-column>
          <el-table-column prop="alarm_content" label="报警描述">
          </el-table-column>
          <el-table-column prop="deal_state" label="处理状态">
            <template slot-scope="scope">
              {{scope.row.deal_state ? '已处理' : '未处理'}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="police_pagination">
        <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      // 总条目数
      total: 20,
      queryInfo: {
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 10
      },
      checkList1: '',
      checkList2: '',
      activeName: 'Week',
      tabPosition: 'left',
      options: [],
      radio: 1,
      tenantid: 1128,
      houseId: '',
      siteId: '',
      startDate: '',
      custom: true,
      endDate: '',
      dateValue: '',
      myChart1: {},
      myChart2: {},
      myChart3: {},
      deal_state: '',
      alarm_level: '',
      timeStart: '',
      endStart: '',
      tableData: [{
        cont1: '01',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '02',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '03',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '04',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '05',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '06',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '07',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '08',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '09',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '10',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '11',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      },
      {
        cont1: '12',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      }, {
        cont1: '13',
        cont2: '2022/04/20',
        cont3: '1#水泵',
        cont4: '紧急',
        cont5: '检测到进口压力值过低检测到进口压力值过低,…',
        cont6: '未处理'
      }]
    }
  },
  async created() {
    this.getData()
    // 泵房数据
    const res = await api.house({ tenantid: this.tenantid })
    res.data.forEach(item => {
      this.options.push({ value: item.site_name, label: item.site_name, id: item.id })
    })
  },
  computed: {
    // 处理过分页的table数据
    AfterChangeData() {
      const start = (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize
      const end = this.queryInfo.pageNum * this.queryInfo.pageSize
      const arrSlice = this.tableData.slice(start, end)
      let arr = []
      arr = arrSlice.filter(item => {
        if (item.alarm_level == this.alarm_level && item.deal_state == this.deal_state) {
          return item
        }
      })
      return (this.alarm_level !== '' && this.deal_state !== '') ? arr : arrSlice
    }
  },
  mounted() {
    document.querySelector('.btn-next').innerHTML = '下一页'
    document.querySelector('.btn-prev').innerHTML = '上一页'
  },
  methods: {
    // 报警级别
    checkCalc1() {
      if (this.checkList1 == '普通') {
        this.alarm_level = 0
      } else if (this.checkList1 == '紧急') {
        this.alarm_level = 1
      }
      // this.getData()
    },
    // 报警状态
    checkCalc2() {
      if (this.checkList2 == '未处理') {
        this.deal_state = 0
      } else if (this.checkList2 == '已处理') {
        this.deal_state = 4
      }
      // this.getData()
    },
    // 选择泵房id
    getHouseId() {
      this.options.forEach(item => {
        if (item.value == this.houseId[0]) this.siteId = item.id
      })
      this.getData()
    },
    async getData() {
      let id = { tenantid: this.tenantid, siteId: this.siteId, deal_state: this.deal_state, alarm_level: this.alarm_level, type: this.activeName, startDate: this.timeStart, endDate: this.endStart }
      const res = await api.warning(id)
      this.tableData = res.data
      this.total = res.data.length
    },
    // 报表切换
    handleClick() {
      if (this.activeName == 'fix') {
        this.custom = false
      } else {
        this.custom = true
        this.startDate = ''
        this.endDate = ''
        this.dateValue = ''
        this.getData()
      }
    },
    handleSizeChange(newSize) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.pageNum = newPage
    },
    // 选择日期
    changeDate() {
      this.startDate = this.formatDate(this.dateValue[0], 'yyyy-MM-dd')
      this.endDate = this.formatDate(this.dateValue[1], 'yyyy-MM-dd')
      this.getData()
    },
    formatDate(date, fmt) {
      // this.formatDate(date,'yyyy-MM-dd hh:mm:ss')
      let time = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        // eslint-disable-next-line no-dupe-keys
        's+': date.getMilliseconds(),
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in time) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (time[k]) : (('00' + time[k]).substr(('' + time[k]).length)))
        }
      }
      return fmt
    },
  }
}
</script>

<style lang="scss" scoped>
.police {
  .police_cont_top {
    width: 5.7rem;
    margin-left: 0.39rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      color: #fff;
      font-size: 0.12rem;
    }

    .el-cascader {
      width: 28%;
    }
  }

  .left_select {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;

    h2 {
      color: #fff;
      font-size: 0.12rem;
    }
  }

  .police_cont {
    width: 9.75rem;
    height: 5.2rem;

    .police_checked {
      width: 100%;
      height: 13%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.15rem;

      .checked_left,
      .checked_right {
        display: flex;
        align-items: center;
        margin: 0 0.5rem;

        h2 {
          font-size: 0.12rem;
          color: #fff;
          margin-right: .16rem;
        }
      }
    }

    .police_table {
      width: 100%;
      height: 73%;
      display: flex;
      justify-content: space-between;
      padding-left: .37rem;
    }

    .police_pagination {
      width: 100%;
      height: 7%;
      margin-top: 0.2rem;
      display: flex;
      justify-content: center;
    }
  }

}
</style>